<!-- HTML5文件 -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
		<title>Agile Lite</title>
		<link rel="stylesheet" href="assets/agile/css/agile.layout.css">
		<link rel="stylesheet" href="assets/agile/css/flat/flat.component.css">
		<link rel="stylesheet" href="assets/agile/css/flat/flat.color.css">
		<link rel="stylesheet" href="assets/agile/css/flat/iconline.css">
		<link rel="stylesheet" href="assets/agile/css/flat/iconform.css">
		<link rel="stylesheet" href="assets/app/css/app.css">
	</head>
	<body>
		<div id="section_container">
			<section id="icon_form_section" data-role="section" class="active">
				<header>
				    <div class="titlebar">
				    	<a data-toggle="back" href="#"><i class="iconfont iconline-arrow-left"></i></a>
				    	<h1>表单字体</h1>
				    </div>
				</header>
				<article data-role="article" id="main_article" data-scroll="verticle" class="active" style="top:44px;bottom:0px;">
					<div class="scroller padded text-center"> 
						<div class="grid" data-col="3">
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-barcode"></span></div>
					          <label class="grid-label">barcode</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-calendar"></span></div>
					          <label class="grid-label">calendar</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-camera"></span></div>
					          <label class="grid-label">camera</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-checkbox"></span></div>
					          <label class="grid-label">checkbox</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-checkbox-checked1"></span></div>
					          <label class="grid-label">checkbox-checked1</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-checkbox-checked2"></span></div>
					          <label class="grid-label">checkbox-checked2</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-checkbox-checked3"></span></div>
					          <label class="grid-label">checkbox-checked3</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-checked"></span></div>
					          <label class="grid-label">checked</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-checked2"></span></div>
					          <label class="grid-label">checked2t</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-file"></span></div>
					          <label class="grid-label">file</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-folder"></span></div>
					          <label class="grid-label">folder</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-handsign"></span></div>
					          <label class="grid-label">handsign</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-image"></span></div>
					          <label class="grid-label">image</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-link"></span></div>
					          <label class="grid-label">link</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-mail"></span></div>
					          <label class="grid-label">mail</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-qrcode"></span></div>
					          <label class="grid-label">qrcode</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-radio"></span></div>
					          <label class="grid-label">radio</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-radio-checked1"></span></div>
					          <label class="grid-label">radio-checked1</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-radio-checked2"></span></div>
					          <label class="grid-label">radio-checked2</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-radio-fill"></span></div>
					          <label class="grid-label">radio-fill</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-record"></span></div>
					          <label class="grid-label">record</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-search"></span></div>
					          <label class="grid-label">search</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-select"></span></div>
					          <label class="grid-label">select</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-time"></span></div>
					          <label class="grid-label">time</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-toggle-off"></span></div>
					          <label class="grid-label">toggle-off</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-toggle-on"></span></div>
					          <label class="grid-label">toggle-on</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-view"></span></div>
					          <label class="grid-label">view</label>
					        </div>
					        <div class="grid-cell">
					          <div class="grid-img"><span class="iconfont iconform-week"></span></div>
					          <label class="grid-label">week</label>
					        </div>
					        <div class="clearfix"></div>
						</div>
					</div>  

				</article>
			</section>
		</div>
		
		<!--- third --->
		<script src="assets/third/jquery/jquery-2.1.3.min.js"></script>
		<script src="assets/third/jquery/jquery.mobile.custom.min.js"></script>
		<script src="assets/third/iscroll/iscroll-probe.js"></script>
		<script src="assets/third/arttemplate/template-native.js"></script>
		<!-- agile -->
		<script type="text/javascript" src="assets/agile/js/agile.js"></script>		
		<!--- bridge --->
		<script type="text/javascript" src="assets/bridge/exmobi.js"></script>
		<script type="text/javascript" src="assets/bridge/agile.exmobi.js"></script>
		<!-- app -->
		<script type="text/javascript" src="assets/app/js/app.js"></script>
		<script>
			$('.grid-cell').on(A.options.clickEvent,function(){
		    	A.alert('提示', $(this).find('.iconfont').attr('class').replace(/.* /,''));
		    	return false;
		    });
		</script>
	</body>
</html>